<template>
  <div class="server-container">
    <div class="server-list">
      <div class="server-item" v-for="(server, index) in servers" :key="index" @click="actionServerOpen(index)">
        <el-card class="box-card">
          <el-row>
            <el-col :span="6"><img :src="icons['ubuntu']" class="icon"></el-col>
            <el-col :span="18">
              <div class="info">
                <div class="name">{{server.name}}</div>
                <div class="host">{{server.username}}@{{server.host}}:{{server.port}}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div class="server-item">
        <el-card class="box-card" style="padding:20px;">
          <dialog-server-edit></dialog-server-edit>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { Loading } from 'element-ui';
import DialogServerEdit from './DialogServerEdit.vue'
export default {
    name : 'AppStartPage',
    components : {
        'dialog-server-edit' : DialogServerEdit,
    },
    data() {
        return {
            icons : {
                'ubuntu' : require('../assets/ubuntu.png'),
                'centos' : require('../assets/centos.png'),
            },
        };
    },
    computed : {
        servers () {
            return this.$store.getters.servers;
        },
    },
    methods : {
        /**
         * 打开服务器
         * @param integer id 服务器ID
         */
        async actionServerOpen(id) {
            let loading = Loading.service({fullscreen: true});
            let servers = this.$store.getters.servers;
            let client = servers[id].getSshClient();
            
            try {
                await client.connect();
            } catch ( error ) {
                loading.close();
                this.$alert(error.message, '无法连接到服务器');
                return;
            }

            await this.$store.dispatch('serverSwitch',id);
            loading.close();
        },
    }
}
</script>
<style scoped>
.server-container {display: table; height: 100%;width: 100%;}
.server-list {padding: 0 100px; display: table-cell; vertical-align: middle;text-align: center;}
.server-item {padding: 10px; display: inline-block; width: 25%;box-sizing: border-box;text-align: left;cursor: pointer;border-radius: 5px;}
.server-item:hover {background: #ebebeb;}
.server-item .icon {width: 64px; height: 64px; border-radius: 50%;}
.server-item .info {padding: 0 10px; }
.server-item .info .name {font-size: 1.5em;}
.server-item .info .host {color: #afacac;margin-top: 10px;}
</style>